<template>
  <app-page card full>
    <template #header>{{ $route.query.id ? '编辑会议室' : '新增会议室' }}</template>
    <el-form
      ref="pageForm"
      :json="formJson"
      :model="pageData.detail"
      :style="'max-width:460px'"
      label-width="100px"
      @submit.prevent="pageActions.handleSubmit()"
    >
      <jax-form-group :json="formJson" v-model="pageData.detail">
        <template #capacity>
          <div class="capacity-title">
            可容纳人数(一个格子代表一个人)：共计
            <el-text type="primary" tag="b">{{ total }}</el-text
            >人
          </div>
          <div class="capacity-wrapper">
            <el-form-item
              prop="maxRow"
              label="排/行"
              :rules="[{ required: true, message: '排/行不能为空', trigger: ['change', 'blur'] }]"
            >
              <el-input-number v-model="pageData.detail.maxRow" :min="1" />
            </el-form-item>
            <el-form-item
              prop="maxCol"
              label="列"
              :rules="[{ required: true, message: '列不能为空', trigger: ['change', 'blur'] }]"
            >
              <el-input-number v-model="pageData.detail.maxCol" :min="1" :max="22" />
              
            </el-form-item>
            <span class="capacity-wrapper__tips">最大为22列</span>
          </div>
        </template>
      </jax-form-group>
    </el-form>

    <div class="capacity-area">
      <div class="capacity-area__body">
        <div class="capacity-area__row" v-for="i in pageData.detail.maxRow" :key="i">
          <!-- :title="`第${i}排，第${j}列`" -->
          <div class="capacity-area__square" v-for="j in pageData.detail.maxCol" :key="j"></div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="app-toolbar">
        <el-button type="default" @click="pageActions.handleCancel()">返回</el-button>
        <el-button type="primary" @click="pageActions.handleSubmit()">保存</el-button>
      </div>
    </template>
  </app-page>
</template>

<script setup>
import { usePageEdit } from 'jax-node'

const { pageData, pageActions, pageForm } = usePageEdit({
  api: 'meet/room',
})

// 计算格子
const gridCells = computed(() => {
  let cells = []
  if (pageData.detail.maxRow && pageData.detail.maxCol) {
    for (let i = 1; i <= pageData.detail.maxRow; i++) {
      for (let j = 1; j <= pageData.detail.maxCol; j++) {
        cells.push({
          row: i,
          col: j,
        })
      }
    }
  }
  return cells
})

pageActions.handleBeforeSubmit = detail => {
  detail.seats = gridCells.value
  return detail
}

const total = computed(() => {
  return (pageData.detail.maxRow || 0) * (pageData.detail.maxCol || 0)
})

const formJson = computed(() => {
  const required = true

  return [
    {
      name: 'roomName',
      label: '会议室名称',
      required,
    },
    {
      name: 'location',
      label: '会议室位置',
      required,
    },
    {
      name: 'desc',
      label: '会议室描述',
      type: 'textarea',
    },
    {
      name: 'isOpen',
      label: '会议室状态',
      type: 'switch',
    },
    {
      name: 'image',
      label: '会议室图片',
      type: 'upload-image',
    },
    {
      name: 'capacity',
    },
  ]
})
</script>

<style lang="scss" scoped>
.capacity-title {
  padding-left: 18px;
  margin-bottom: 18px;
}
.capacity-wrapper {
  display: flex;
  width: max-content;
  align-items: baseline;
  &__tips {
    margin-left: 10px;
    font-size: 12px;
    color: rgba($color: #000000, $alpha: 0.4);
  }
}
.capacity-area {
  width: 100%;
  padding: 40px;
  background-color: #f8f8f8;
  &__body {
    overflow-x: auto;
  }
  &__row {
    display: flex;
    gap: 6px;
    &:not(:last-child) {
      margin-bottom: 6px;
    }
  }
  &__square {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: #fff;
    border: 1px solid #35a3ff;
    border-radius: 5px;
  }
}
</style>
